<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个vue应用</title>
    <script src="../js/vue.min.2.7.0.js"></script>
</head>
<body>
<div id="app">

    <button @click="disappear">change</button>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data() {
            return {
                msg: 'hello vue!'
            }
        },
        methods: {
            disappear: function () {
            	eval("vm.$destroy()")/* 执行vue对象销毁命令 */
        	}
        },
        //vue生命周期的初始化阶段的钩子函数:
        beforeCreate() {//还没new Vue时触发的
            console.log('beforeCreate..');
        },
        created() {//刚new完Vue时触发的
            console.log('created..');
        },
        //vue生命周期的服务阶段的钩子函数:(挂载,更新beforeUpdate/updated)
        beforeMount() {//还没有解析插值表达式
            console.log('beforeMount..');
            console.log(this.$el);//获取el对应的dom节点的内容
        },
        mounted() {//刚解析插值表达式
            console.log('mounted..');
            console.log(this.$el);
        },
        beforeUpdate() {
            console.log("beforeUpdate");
        },
        updated() {
            console.log("updated");
        },
        //vue生命周期的销毁阶段的钩子函数:(销毁)
        //需要在浏览器的控制台输入vm.$destroy()才会执行销毁阶段
        beforeDestroy() {
            console.log('beforeDestroy..');
        },
        destroyed() {
            console.log('destroyed..');
        }
    })
</script>
</body>
</html>